{% extends "templates/base.phtml" %}
{%block content%}
{% if wxc is defined %}
<div class="page-content-wrap">
    <div class="row">
        <div class="col-md-12">
            <div class="panel panel-default tabs">
                {%include 'include/wx_tabs' with ['action':action]%}
                <div class="panel-body tab-content">
                    <div class="tab-pane active">
                        <div class="col-md-12">
                            <h3>粉丝列表</h3>

                            <div class="panel panel-default J-panel">
                                <div class="panel-heading">
                                    <div class="checkbox pull-left">
                                        <label><input type="checkbox" class="select-all">全选</label>
                                    </div>
                                    <div class="col-md-2 col-xs-3">
                                        <select class="form-control select">
                                            <option>添加到</option>
                                        </select>
                                    </div>
                                    <div class="btn-group pull-right">
                                        <button class="btn btn-success">+新建分组</button>
                                    </div>
                                </div>
                                <div class="panel-body def-pan-bd">
                                    <!--Friends list-->
                                    <div class="col-md-10 pull-left">
                                        <ul>
                                            <li class="col-md-12 f-list">
                                                <div>
                                                    <div class="checkbox pull-left">
                                                        <input type="checkbox">
                                                    </div>
                                                    <div class="fans_img pull-left">
                                                        <img src="http://placehold.it/40x40"/>
                                                    </div>
                                                    <div class="f-name col-md-2 col-xs-3">
                                                        <span>姓名</span>
                                                    </div>
                                                    <div class="f-ungroup col-md-3 col-xs-3">
                                                        <select class="form-control select">
                                                            <option>未分组</option>
                                                        </select>
                                                    </div>
                                                    <div class="f-change col-md-3 col-xs-3">
                                                        <input class="form-control" placeholder="修改备注"/>
                                                    </div>
                                                </div>
                                            </li>
                                        </ul>
                                    </div>
                                    <!--Friends list end-->

                                    <!--Friends group-->
                                    <div class="col-md-2 pull-right" style="background: #FAFAFA">
                                        <ul>
                                            <li class="col-md-12 f-group">
                                                <span><label>全部</label>（120）</span>
                                            </li>
                                            <li class="col-md-12 f-group">
                                                <span><label>好友</label>（12）</span>
                                            </li>
                                            <li class="col-md-12 f-group">
                                                <span><label>黑名单</label>（20）</span>
                                            </li>
                                            <li class="col-md-12 f-group">
                                                <span><label>未分组</label>（20）</span>
                                            </li>
                                        </ul>
                                    </div>
                                    <!--Friends group end-->
                                </div>
                            </div>
                            <!--pages-->
                            <ul class="pagination pagination-sm pull-right push-down-20">
                                <li class="disabled"><a href="#">首页</a></li>
                                <li class="disabled"><a href="#">上一页</a></li>
                                <li><a href="#">下一页</a></li>
                                <li><a href="#">末页</a></li>
                            </ul>
                            <!--pages end-->
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{%endif%}
{%endblock %}
{%block end%}
<style type="text/css">
    .def-pan-bd {
        padding: 0 !important;
    }

    .fans_img {
        max-width: 50px;
        width: 50px;
        height: auto;
    }

    ul, ul li {
        padding: 0;
        margin: 0;
    }

    ul li {
        list-style-type: none;
    }

    .f-list {
        margin-top: 10px;
    }

    .f-list .checkbox, .f-name {
        margin: 10px 15px;
    }

    .f-ungroup, .f-change {
        margin-top: 8px;
    }

    .f-group {
        text-align: center;
        padding: 10px 0 5px;
        border-bottom: 1px solid #DDDDDD;
    }

    .f-group:last-child {
        border-bottom: none;
    }
</style>
<script type="application/javascript">
    $(document).ready(function () {
        //全选
        var selected_all = false;
        $('.J-panel').on("click", ".select-all", function () {
            $(".f-list input[type='checkbox']").attr("checked", (selected_all = !selected_all));
            console.log(selected_all);
        });
    });
</script>
{%endblock%}